<template>
  <div class="IndexView">
    <van-nav-bar
      title="标题"
      right-text="按钮"
      left-arrow
      @click-left="onClickLeft"
      @click-right="onClickRight"
    >
      <template #right>
        <van-icon name="search" size="18" />
      </template>
    </van-nav-bar>
    <router-view />
    <van-tabbar route @change="onChange" :active="active">
      <van-tabbar-item icon="home-o" name="home" to="/"> 主页 </van-tabbar-item>
      <van-tabbar-item icon="search" name="team" to="/team"
        >队伍</van-tabbar-item
      >
      <van-tabbar-item icon="setting-o" name="user" to="/user"
        >个人中心</van-tabbar-item
      >
    </van-tabbar>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { useRouter } from 'vue-router'
const router = useRouter()
const active = ref('home')
const onChange = index => {
  active.value = index
}
const onClickLeft = () => {
  router.push('/')
}
const onClickRight = () => {
  router.push('/search')
}
</script>

<style scoped></style>
